<template>
    <div id="page">
        <!-- 顶部 -->
        <div id="header_top">
            <p class="iconfont">&#xe6bc;</p>
            <p>注册</p>
            <p>
                <span class="iconfont">&#xf0112;
                </span>
                <span class="iconfont">&#xe71e;</span>
                <i></i>
            </p>

        </div>

        <!-- 内容 -->
        <main>
            <div id="content">
                <div class="con">
                    <img src="../../assets/images/logo.jpg" alt="">
                    <p>
                        <span>账号</span>
                        <input type="text" v-model="user.phone">
                    </p>
                    <p>
                        <span>昵称</span>
                        <input type="text" v-model="user.nickname">
                    </p>
                    <p>
                        <span>密码</span>
                        <input type="text" v-model="user.password">
                    </p>
                    <p @click="fn()">
                        登录
                    </p>
                </div>
            </div>
        </main>
    </div>
    
</template>

<script>
import {register} from '../../utils/api'
import {Toast} from 'vant'
export default {
    data() {
        return {
            user:{
                phone:'',
                password:'',
                nickname:''
            }
        }
    },
    methods: {
        fn(){
            if(this.user.phone!=''&&this.user.password!=''&&this.user.nickname!=""){
                register(this.user).then(res=>{
                    if(res.data.code==200){
                        Toast.success(res.data.msg);
                        this.$router.push('/login')
                    }else{
                        Toast.fail(res.data.msg);
                    }                    
                })
            }else{
                Toast.fail('手机号昵称密码不能为空')
            }

        }
    }
}
</script>

<style scoped src='../../assets/css/register.css'>

</style>